<template>
  <div class="schoolDetailsContend">
    <div class="container">
      <section class="schoolDetails">
        <div class="topTitleTab">
          <span>当前位置：首页 > 驾校 > {{ details.school.short_title }}</span>
        </div>
        <!-- 驾校信息 -->
        <section class="schoolinfo">
          <div class="left">
            <img :src="details.school.head_img" alt="" />
          </div>
          <div class="mid">
            <div class="schoolinfoTitle">
              <span class="title titleColor">{{
                details.school.short_title
              }}</span>
              <img src="~/assets/images/schoolTitle.png" alt="" />
            </div>
            <div class="group">
              <div class="groupItem" v-if="details.school.license">
                <img src="~/assets/images/zu.png" alt="" />
                <span>营业执照认证</span>
              </div>
              <div class="groupItem" v-if="details.school.road_permit">
                <img src="~/assets/images/lj.png" alt="" />
                <span>运营认证</span>
              </div>
              <!-- <div class="starBox">
                <img
                  src="~/assets/images/rankstar.png"
                  alt=""
                  v-for="num in 5"
                  :key="num"
                />
                <span class="tips">点评0条</span>
              </div> -->
            </div>
            <div class="group">
              <div class="groupItem">
                <img src="~/assets/images/banxing.png" alt="" />
                <span class="banxing">班型：</span>
                <div class="banxingBox">
                  <span v-for="(item, i) in details.package" :key="i">{{
                    item.title
                  }}</span>
                </div>
              </div>
            </div>
            <div class="group">
              <div class="groupItem">
                <img src="~/assets/images/local.png" alt="" />
                <span>驾校地址：{{ details.school.address }}</span>
              </div>
            </div>
            <div class="group">
              <div class="groupItem">
                <span>服务</span>
                <div class="starBox">
                  <img
                    src="~/assets/images/rankstar.png"
                    alt=""
                    v-for="num1 in details.school.score.cost"
                    :key="num1 + '-only1'"
                  />
                  <img
                    v-if="details.school.score.cost < 5"
                    src="~/assets/images/rankstarhui.png"
                    alt=""
                    v-for="num2 in 5 - details.school.score.cost"
                    :key="num2 + '-only2'"
                  />
                </div>
              </div>
              <div class="groupItem">
                <span>教学</span>
                <div class="starBox">
                  <img
                    src="~/assets/images/rankstar.png"
                    alt=""
                    v-for="num3 in details.school.score.learn"
                    :key="num3 + '-only3'"
                  />
                  <img
                    v-if="details.school.score.learn < 5"
                    src="~/assets/images/rankstarhui.png"
                    alt=""
                    v-for="num4 in 5 - details.school.score.learn"
                    :key="num4 + '-only4'"
                  />
                </div>
              </div>
              <div class="groupItem">
                <span>场地</span>
                <div class="starBox">
                  <img
                    src="~/assets/images/rankstar.png"
                    alt=""
                    v-for="num5 in details.school.score.place"
                    :key="num5 + '-only5'"
                  />
                  <img
                    v-if="details.school.score.place < 5"
                    src="~/assets/images/rankstarhui.png"
                    alt=""
                    v-for="num6 in 5 - details.school.score.place"
                    :key="num6 + '-only6'"
                  />
                </div>
              </div>
              <div class="groupItem">
                <span>收费</span>
                <div class="starBox">
                  <img
                    src="~/assets/images/rankstar.png"
                    alt=""
                    v-for="num7 in details.school.score.service"
                    :key="num7 + '-only7'"
                  />
                  <img
                    v-if="details.school.score.service < 5"
                    src="~/assets/images/rankstarhui.png"
                    alt=""
                    v-for="num8 in 5 - details.school.score.service"
                    :key="num8 + '-only8'"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <span class="money">{{ details.school.mainCost }}</span>
            <el-button type="primary">免费咨询</el-button>
          </div>
        </section>
        <!-- 配套设施 -->
        <section class="matching">
          <div class="title">
            <span>配套设施</span>
          </div>
          <div class="matchinglist" v-if="details.school.base">
            <div
              class="matchingitem"
              v-for="(item, i) in details.school.base.facilities"
              :key="i"
            >
              <div class="imgBox">
                <img :src="item.alias" alt="" />
              </div>
              <span>{{ item.title }}</span>
            </div>
          </div>
        </section>
        <!-- 表格区 -->
        <section class="tableBox">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="班型及费用" name="bx">
              <div class="tab-pane-contend">
                <el-table
                  :data="details.package"
                  border
                  style="width: 100%"
                  size="small"
                  v-if="details.package"
                >
                  <el-table-column
                    prop="title"
                    label="班型名称"
                  ></el-table-column>
                  <el-table-column
                    prop="type"
                    label="班型类型"
                  ></el-table-column>
                  <el-table-column
                    prop="apply_type"
                    label="申领类型"
                  ></el-table-column>

                  <el-table-column prop="cost" label="班型费用">
                    <template slot-scope="scope">
                      <span class="bxfyone">{{ scope.row.cost }}</span
                      ><span v-if="scope.row.price" class="bxfytwo">{{
                        scope.row.price
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="pay_type"
                    label="缴费类型"
                  ></el-table-column>
                  <el-table-column
                    prop="free_again"
                    label="免费重学"
                  ></el-table-column>
                </el-table>
                <div class="nodataBox" v-else>
                  <img src="~/assets/images/nodata.png" alt="" />
                  <span class="tips">暂无数据</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="驾校简介" name="jx">
              <div class="tab-pane-contend">
                <div
                  v-html="details.school.base.profile"
                  v-if="details.school.base && details.school.base.profile"
                  class="htmlCon"
                ></div>
                <div class="nodataBox" v-else>
                  <img src="~/assets/images/nodata.png" alt="" />
                  <span class="tips">暂无数据</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="训练场地" name="xl">
              <div class="tab-pane-contend">
                <div v-if="details.trainPlace.length > 0">
                  <div class="mapBox">
                    <showMap :mapData="mapData" ref="childMap"></showMap>
                  </div>
                  <div class="listBox">
                    <div
                      :class="mapListCurrentIdx == i ? 'item active' : 'item'"
                      v-for="(item, i) in details.trainPlace"
                      :key="i"
                      @click="changeMapCen(item, i)"
                    >
                      <span class="mapTitle titleColor">{{ item.title }}</span>
                      <span class="tips">{{ item.address }}</span>
                    </div>
                  </div>
                </div>
                <div class="nodataBox" v-else>
                  <img src="~/assets/images/nodata.png" alt="" />
                  <span class="tips">暂无数据</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="教学环境" name="hj">
              <div class="tab-pane-contend">
                <div class="photos" v-if="details.photo.list">
                  <el-image
                    style="width:200px; height:160px;margin-bottom:20px;margin-right:25px"
                    v-for="item,i in details.photo.list"
                    :src="item"
                    :key="i"
                    fit="fit"

                    :preview-src-list="getPrivewImages(i)"
                  >
                  </el-image>
                </div>
                <div class="nodataBox" v-if="details.photo.list.length == 0">
                  <img src="~/assets/images/nodata.png" alt="" />
                  <span class="tips">暂无数据</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="学员点评" name="dp">
              <div class="tab-pane-contend">
                <div
                  class="comment"
                  v-for="(item, i) in details.comment.list"
                  :key="i"
                  v-if="details.comment.list"
                >
                  <div class="leftImg">
                    <div class="imgbox">
                      <el-image
                        :src="
                          item.userInfo && item.userInfo.head_img
                            ? item.userInfo.head_img
                            : require('~/assets/images/peopleMr.png')
                        "
                        :preview-src-list="
                          item.userInfo && item.userInfo.head_img
                            ? [item.userInfo.head_img]
                            : [require('~/assets/images/peopleMr.png')]
                        "
                      >
                      </el-image>
                    </div>
                    <span class="tips">{{
                      item.userInfo && item.userInfo.nickname
                        ? item.userInfo.nickname
                        : "匿名"
                    }}</span>
                  </div>
                  <div class="right">
                    <div class="starBox">
                      <span class="tips">评分：</span>
                      <img
                        src="~/assets/images/rankstar.png"
                        alt=""
                        v-for="num0 in item.score"
                        :key="num0 + '-only9'"
                      />

                      <img
                        v-if="item.score < 5"
                        src="~/assets/images/rankstarhui.png"
                        alt=""
                        v-for="num10 in 5 - item.score"
                        :key="num10 + '-only10'"
                      />
                    </div>
                    <p>{{ item.content }}</p>
                    <span class="tips">时间：{{ item.update_time }}</span>
                  </div>
                </div>
                <div class="nodataBox" v-if="details.comment.list.length == 0">
                  <img src="~/assets/images/nodata.png" alt="" />
                  <span class="tips">暂无数据</span>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </section>
      </section>
    </div>
  </div>
</template>
<script>
import showMap from "@/components/showMap.vue";
import { schoolDetail } from "~/api/commen";
export default {
  components: {
    showMap,
  },
  data() {
    return {
      activeName: "bx",
      mapListCurrentIdx: 0,
      mapData: null,
      page:1,
      rows:10
    };
  },
  watchQuery: ["schoolId"],
  async asyncData({ app, query, params }) {

    let schoolId = query.schoolId;
    let details = await schoolDetail({ id: schoolId,page:1,rows:20 });
    let page=details.photo.page

    return {
      details: details,
      mapDataOne: details.trainPlace[0],
      pageData:page
    };
  },
  methods: {
     // 预览对应当前图片列表
            getPrivewImages(index) {

                let tempImgList = [...this.details.photo.list];//所有图片地址
                if (index == 0) return tempImgList;
                // 调整图片顺序，把当前图片放在第一位
                let start = tempImgList.splice(index);
                let remain = tempImgList.splice(0, index);
                return start.concat(remain);//将当前图片调整成点击缩略图的那张图片
            },
    handleClick(tab, event) {
    
    },
    //切换地图
    changeMapCen(val, i) {
      this.mapListCurrentIdx = i;
      this.mapData = val;
    },
  },
  mounted() {
    this.mapData = this.mapDataOne;
  },
};
</script>

<style scoped lang='scss'>
@import "~/assets/css/schoolDetails.scss";
::v-deep {
  .el-tabs__nav-scroll {
    padding: 0 30px;
  }
  .el-tabs__nav {
    display: flex;
    align-items: center;
    height: 62px;
    line-height: 62px;
    .el-tabs__item {
      text-align: center;
      font-size: 18px;
      padding: 0 40px;
    }
  }
  .el-image {
    width: 100%;
    height: 100%;
  }
  .el-table th {
    background-color: #f2f2f2 !important;
    color: #3a3a3a;
    font-size: 16px;
  }
  .cell {
    color: #6d6d6d;
    font-size: 14px;
  }
}
.photos{
  display: flex;
  flex-wrap: wrap;
}
</style>